{% extends 'base.html' %}
{% load static %}

{% block title %}{{ article.title }} - TechSpace{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<style>
    .article-content {
        line-height: 1.8;
    }
    
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: var(--primary-color);
    }
    
    .article-content p {
        margin-bottom: 1.5rem;
    }
    
    .article-content blockquote {
        border-left: 4px solid var(--primary-color);
        padding-left: 1rem;
        margin: 1.5rem 0;
        background: rgba(0, 212, 255, 0.1);
        padding: 1rem;
        border-radius: 0 8px 8px 0;
    }
    
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
    }
    
    .article-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
    }
    
    .article-content table th,
    .article-content table td {
        border: 1px solid var(--border-color);
        padding: 0.75rem;
        text-align: left;
    }
    
    .article-content table th {
        background: var(--code-bg);
        font-weight: 600;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <!-- 主要内容区域 -->
        <div class="col-lg-8">
            <article class="tech-card">
                <!-- 文章头部 -->
                <header class="article-header mb-4">
                    {% if article.featured_image %}
                    <img src="{{ article.featured_image.url }}" alt="{{ article.title }}" 
                         class="img-fluid rounded mb-4" style="width: 100%; height: 300px; object-fit: cover;">
                    {% endif %}
                    
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h1 class="article-title display-5 fw-bold mb-0">{{ article.title }}</h1>
                        
                        {% if user.is_authenticated and user == article.author or user.is_staff %}
                        <div class="article-actions">
                            <a href="{% url 'blog:article_edit' article.slug %}" 
                               class="btn btn-outline-primary btn-sm me-2">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            <a href="{% url 'blog:article_delete' article.slug %}" 
                               class="btn btn-outline-danger btn-sm">
                                <i class="fas fa-trash"></i> 删除
                            </a>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="article-meta d-flex flex-wrap align-items-center mb-4">
                        <div class="me-4">
                            <i class="fas fa-user"></i> {{ article.author.username }}
                        </div>
                        <div class="me-4">
                            <i class="fas fa-calendar"></i> {{ article.created_at|date:"Y年m月d日" }}
                        </div>
                        <div class="me-4">
                            <i class="fas fa-eye"></i> {{ article.views }} 次阅读
                        </div>
                        {% if article.category %}
                        <div class="me-4">
                            <i class="fas fa-folder"></i> 
                            <a href="{% url 'blog:category_detail' article.category.slug %}" 
                               class="text-decoration-none">{{ article.category.name }}</a>
                        </div>
                        {% endif %}
                        {% if article.updated_at != article.created_at %}
                        <div class="me-4">
                            <i class="fas fa-edit"></i> {{ article.updated_at|date:"Y年m月d日" }} 更新
                        </div>
                        {% endif %}
                    </div>
                    
                    {% if article.tags.all %}
                    <div class="article-tags mb-4">
                        {% for tag in article.tags.all %}
                        <a href="{% url 'blog:tag_detail' tag.slug %}" class="tag text-decoration-none me-2">
                            {{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                </header>
                
                <!-- 文章内容 -->
                <div class="article-content">
                    {{ article.get_markdown_content|safe }}
                </div>
                
                <!-- 文章底部 -->
                <footer class="article-footer mt-5 pt-4 border-top">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="share-buttons">
                                <h6 class="mb-3">分享文章</h6>
                                <a href="https://twitter.com/intent/tweet?text={{ article.title }}&url={{ request.build_absolute_uri }}" 
                                   target="_blank" class="btn btn-sm btn-outline-primary me-2">
                                    <i class="fab fa-twitter"></i> Twitter
                                </a>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" 
                                   target="_blank" class="btn btn-sm btn-outline-primary me-2">
                                    <i class="fab fa-facebook"></i> Facebook
                                </a>
                                <button class="btn btn-sm btn-outline-primary" onclick="copyToClipboard()">
                                    <i class="fas fa-link"></i> 复制链接
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <div class="author-info">
                                <h6 class="mb-2">作者：{{ article.author.username }}</h6>
                                <p class="text-muted mb-0">感谢阅读，欢迎交流讨论！</p>
                            </div>
                        </div>
                    </div>
                </footer>
            </article>
            
            <!-- 相关文章 -->
            {% if related_articles %}
            <section class="related-articles mt-5">
                <h3 class="mb-4">相关文章</h3>
                <div class="row">
                    {% for related in related_articles %}
                    <div class="col-md-4 mb-3">
                        <div class="tech-card h-100">
                            <h5 class="card-title">
                                <a href="{{ related.get_absolute_url }}" class="text-decoration-none">
                                    {{ related.title|truncatechars:50 }}
                                </a>
                            </h5>
                            <p class="card-description">{{ related.excerpt|truncatewords:15 }}</p>
                            <div class="article-meta">
                                <i class="fas fa-calendar"></i> {{ related.created_at|date:"m-d" }}
                                <span class="ms-2">
                                    <i class="fas fa-eye"></i> {{ related.views }}
                                </span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </section>
            {% endif %}
            
            <!-- 评论区域 -->
            <section class="comments-section mt-5">
                <h3 class="mb-4">评论 ({{ comments.count }})</h3>
                
                {% if comments %}
                <div class="comments-list">
                    {% for comment in comments %}
                    <div class="tech-card mb-3">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="comment-author">
                                <strong>{{ comment.name }}</strong>
                                {% if comment.website %}
                                <a href="{{ comment.website }}" target="_blank" class="text-decoration-none ms-2">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                                {% endif %}
                            </div>
                            <small class="text-muted">{{ comment.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <div class="comment-content">
                            {{ comment.content|linebreaks }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-comments" style="font-size: 3rem; color: var(--gray-text);"></i>
                    <p class="mt-3 text-muted">暂无评论，来发表第一个评论吧！</p>
                </div>
                {% endif %}
                
                <!-- 评论表单 -->
                <div class="comment-form mt-4">
                    <h4 class="mb-3">发表评论</h4>
                    <div class="tech-card">
                        <form method="post" action="#">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">姓名 *</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">邮箱 *</label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="website" class="form-label">网站</label>
                                <input type="url" class="form-control" id="website" name="website">
                            </div>
                            <div class="mb-3">
                                <label for="content" class="form-label">评论内容 *</label>
                                <textarea class="form-control" id="content" name="content" rows="4" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-tech">
                                <i class="fas fa-paper-plane"></i> 发表评论
                            </button>
                        </form>
                    </div>
                </div>
            </section>
        </div>
        
        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 目录 -->
            <div class="tech-card mb-4 sticky-top" style="top: 100px;">
                <h5 class="card-title mb-3">
                    <i class="fas fa-list"></i> 文章目录
                </h5>
                <div id="toc" class="toc">
                    <!-- 目录将通过JavaScript生成 -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>
    // 代码高亮
    hljs.highlightAll();
    
    // 生成目录
    function generateTOC() {
        const toc = document.getElementById('toc');
        const headings = document.querySelectorAll('.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6');
        
        if (headings.length === 0) {
            toc.innerHTML = '<p class="text-muted">本文暂无目录</p>';
            return;
        }
        
        let tocHTML = '<ul class="list-unstyled">';
        headings.forEach((heading, index) => {
            const id = 'heading-' + index;
            heading.id = id;
            const level = parseInt(heading.tagName.charAt(1));
            const indent = (level - 1) * 20;
            
            tocHTML += `<li style="margin-left: ${indent}px; margin-bottom: 0.5rem;">
                <a href="#${id}" class="text-decoration-none toc-link" data-level="${level}">
                    ${heading.textContent}
                </a>
            </li>`;
        });
        tocHTML += '</ul>';
        
        toc.innerHTML = tocHTML;
        
        // 添加平滑滚动
        document.querySelectorAll('.toc-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    }
    
    // 复制链接功能
    function copyToClipboard() {
        navigator.clipboard.writeText(window.location.href).then(function() {
            alert('链接已复制到剪贴板！');
        });
    }
    
    // 页面加载完成后生成目录
    document.addEventListener('DOMContentLoaded', function() {
        generateTOC();
    });
</script>
{% endblock %}